<!-- TreeSelector.vue -->
<script setup lang="ts">
import { computed, inject, onMounted, watch } from 'vue'
import TreeItem from './TreeItem.vue'
const playList = inject('playList')
import { ElSwitch, ElMessage } from 'element-plus'
const emit = defineEmits(['changePortStatus'])
const props = defineProps({
  allPort: { type: Array },
  taskPort: { type: Array },
  activeTab: { type: String },
  cell: { type: Number },
  searchList: { type: Array },
  isSearched: { type: Boolean }
})

const getPortList = computed(() => {

  if (props.searchList.length == 0 && props.isSearched == false) {
    return props.activeTab == 'first' ? props.taskPort : props.allPort
  } else {
    return props.searchList
  }
})

// 单选点击
const handleCheckboxChange = (item) => {
  if (item && item.id) {
    // 如果点击的是父节点，则这里不把当前父节点进去
    if (item.children) {
    } else {
      // 如果是选中
      if (item.checked) {
        if (playList.value.length + 1 > props.cell) {
          ElMessage.info('可播放视频已达上限，请选择左侧视频进行切换')

          item.checked = false
        } else {
          playList.value.push(item)
        }
      } else {
        playList.value = playList.value.filter((playItem) => {
          return playItem.id != item.id
        })
      }
    }

  }
  // 更新子节点的状态  点击全选时，子节点全部选中
  updateChildCheckboxes(item, item.checked)

  if (props.activeTab == 'first') {
    updateParentCheckboxes(props.taskPort)
  } else {
    updateParentCheckboxes(props.allPort)
  }
}

const updateChildCheckboxes = (item, checked) => {
  if (checked) {
    if (item.children) {
      // 判断当前组剩余可选中的值的数量
      const unChecked = []
      item.children.find((childItem) => {
        if (!childItem.checked) {
          unChecked.push(childItem)
        }
      })
      if (playList.value.length + unChecked.length > props.cell) {
        ElMessage.info('可播放视频已达上限，请选择左侧视频进行切换')
        item.checked = false
      } else {
        item.children.forEach((child) => {
          if (!child.checked) {
            playList.value.push(child)
            child.checked = checked
            updateChildCheckboxes(child, checked)
          }
        })
      }
    }
  } else {
    if (item.children) {
      item.children.forEach((child) => {
        playList.value = playList.value.filter((playItem) => {
          return playItem.id != child.id
        })
        child.checked = checked

        updateChildCheckboxes(child, checked)
      })
    }
  }
}

const updateParentCheckboxes = (items) => {
  items.forEach((item) => {
    if (item.children) {
      const allChecked = item.children.every((child) => child.checked)
      const someChecked = item.children.some((child) => child.checked)
      item.checked = allChecked
      item.indeterminate = someChecked && !allChecked
      updateParentCheckboxes(item.children)
    }
  })
}

const toggleChildren = (item) => {
  console.log(item, 'toggleChildren')
  item.open = !item.open
}
onMounted(()=>{
console.log('pllaylist页面的allport ',props.allPort)

})
</script>
<template>
  <div class="tree-selector">
    <template v-if="activeTab == 'second'">
      <div
        v-for="item in getPortList"
        :key="item.id"
        class="tree-item"
        :data-level="0"
        :class="{ isOpen: item.open, isClose: !item.open }"
      >
        <div class="item-content flex items-center cursor-pointer justify-between">
          <div class="flex items-center">
            <el-checkbox
              @change="(event) => handleCheckboxChange(item)"
              :disabled="activeTab == 'second' ? false : true"
              v-model="item.checked"
              :label="item.name"
              size="large"
            />
            <span v-if="item.status" class="status">{{ item.astatus==0?'任务中':'在线' }}</span>
          </div>

          <Icon
            class="top_icon"
            icon="svg-icon:arrowb"
            :size="13"
            v-if="item.children && !item.open"
            @click="toggleChildren(item)"
          />
          <Icon
            class="top_icon"
            icon="svg-icon:arrowt"
            :size="13"
            v-if="item.children && item.open"
            @click="toggleChildren(item)"
          />
        </div>
        <div
          class="children"
          v-if="item.children"
          :style="{ display: item.open ? 'block' : 'none' }"
        >
          <TreeItem
            v-for="child in item.children"
            :key="child.id"
            :item="child"
            :level="1"
            @change="handleCheckboxChange"
          />
        </div>
      </div>
    </template>
    <template v-else>
      <div
        v-for="item in getPortList"
        :key="item.id"
        class="tree-item"
        :data-level="0"
        :class="{ isOpen: item.open, isClose: !item.open }"
      >
        <div class="item-content flex items-center cursor-pointer justify-between">
          <div class="flex items-center">
            <el-checkbox
              @change="(event) => handleCheckboxChange(item)"
              :disabled="activeTab == 'first' ? false : true"
              v-model="item.checked"
              :label="item.name"
              :id="item.id"
              size="large"
            />

            <span v-if="item.status" class="status">{{ item.astatus==0?'任务中':'在线' }}</span>
          </div>

          <Icon
            class="top_icon"
            icon="svg-icon:arrowb"
            :size="13"
            v-if="item.children && !item.open"
            @click="toggleChildren(item)"
          />
          <Icon
            class="top_icon"
            icon="svg-icon:arrowt"
            :size="13"
            v-if="item.children && item.open"
            @click="toggleChildren(item)"
          />
        </div>
        <div
          class="children"
          v-if="item.children"
          :style="{ display: item.open ? 'block' : 'none' }"
        >
          <TreeItem
            v-for="child in item.children"
            :key="child.id"
            :item="child"
            :level="1"
            @change="handleCheckboxChange"
          />
        </div>
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
.tree-selector {
  font-family: Arial, sans-serif;
  color: white;
  // border: 1px solid #0c6eba;
}
.isOpen {
  background: rgba(57, 109, 230, 0.24);
  border: 1px solid #0c6eba;
}
.isClose {
  background: rgba(57, 109, 230, 0.55);
  border: 1px solid #0c6eba;
}
.tree-item {
  position: relative;
  padding: 10px;
  .item-content {
    display: flex;
    align-items: center;
    .top_icon {
      margin-left: 16px;
    }

    > label {
      font-weight: bold;
    }
  }

  .status {
    // background-color: #3b82f6;
    padding: 2px 5px;
    font-size: 0.8em;
    margin-left: 10px;
    background: rgba(12,110,186,0.3);
    border-radius: 2px;
    border: 1px solid #396DE6;

  }

  // .custom-checkbox {
  //   width: 16px;
  //   height: 16px;
  //   border: 1px solid #6b7280;
  //   background-color: transparent;
  //   display: inline-block;
  //   margin-right: 5px;
  //   position: relative;
  //   cursor: pointer;
  //   background-color: pink;

  //   &::after {
  //     content: '';
  //     width: 10px;
  //     height: 10px;
  //     background-color: #3b82f6;
  //     background-color: yellow;
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     transform: translate(-50%, -50%) scale(0);
  //     transition: transform 0.2s;
  //   }
  // }
  .custom-checkbox::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #3b82f6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s;
  }
  .custom-checkbox.checked::after {
    transform: translate(-50%, -50%) scale(1);
  }
  input[type='checkbox'] {
    display: none;

    &:checked + .custom-checkbox::after {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .children {
    padding-left: 20px;
    margin-top: 5px;

    &::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 24px;
      bottom: 0;
      width: 1px;
      border-left: 1px dashed #6b7280;
    }

    .tree-item::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 20px;
      width: 12px;
      height: 1px;
      border-bottom: 1px dashed #6b7280;
    }
  }

  .toggle {
    cursor: pointer;
    margin-left: 5px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6b7280;
    border-radius: 3px;
  }
}
</style>
